<template>
  <div class="km-todolist">
    <ul id="todoList">
      <todo-item v-for="(todo, index) in filterTodos" :key="index" :todos="todos" :todo="todo" :index="index"></todo-item>
    </ul>
  </div>
</template>
<script type="text/javascript">
  // 引入组件
  import TodoItem from './TodoItem.vue'
  let filter = {
    all: function(todos){
      return todos
    },
    active: function(todos){
      return todos.filter(function(todo){
        return !todo.completed
      })
    },
    completed: function(todos){
      return todos.filter(function(todo){
        return todo.completed
      })
    }
  }
  export default{
    name: 'todo-list',
    props: ['todos', 'filter'],
    computed: {
      filterTodos(){
        console.log('TodoList--components-->>>'+this.filter)
        return filter[this.filter](this.todos)
      }
    },
    components: {
        TodoItem
    }

  }
</script>
<style>
    #todoList{
        max-height: 350px;
        position: relative;
        padding: 0 20px 0 5px;
    }
</style>
